import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import AvatarView from '../../AvatarView'
import { Link } from 'react-router-dom'
import { UserService } from '../../../transfer/service/UserService'

interface IAccountNavBarProps {
    userId: string
}

export default function AccountNavBar(props: IAccountNavBarProps) {
    const [expend, setExpends] = useState(false)
    const [data, setData] = useState<any>({})

    // 初始化数据
    useEffect(() => {
        new UserService().getProfile(props.userId).then(res => {
            setData(res.data.data.profile)
        })
    }, [])

    // 初始化布局
    useEffect(() => {
        let start_scroll_top: number | undefined = 0
        $(document).on('scroll', () => {
            let end_scroll_top = $(document).scrollTop()

            if (end_scroll_top! > 0) {
                $(`.${style.container}`).addClass('active')
            } else {
                $(`.${style.container}`).removeClass('active')
            }

            start_scroll_top = $(document).scrollTop()
        })
    }, [])

    return (
        <div className={style.container}>
            <Link to={'/editorial'}>LineView</Link>
            <div
                className={style.head}
                onClick={() => {
                    setExpends(!expend)
                }}>
                <AvatarView width={'32px'} height={'32px'} img={'http://localhost:3000/' + data.avatar} />
                <div className={`${style.modal} ${expend ? 'expend' : ''}`}>
                    <div className={style.triangle} />
                    <div className={style.list}>
                        <div className={style.content}>
                            <Link to={'/profile'} className={style.item}>
                                查看资料
                            </Link>
                            {/*<Link to={'#'} className={style.item}>*/}
                            {/*    状态*/}
                            {/*</Link>*/}
                            <Link to={'/account_setting/profile/' + props.userId} className={style.item}>
                                账号设置
                            </Link>
                        </div>
                        <div className={style.line} />
                        <Link to={'#'} className={style.logout__btn}>
                            退出
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    )
}
